<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅游路线日程规划</title>
    <style>
        body {
            background-color: #4c9478;
        }

        #container {
            display: flex;
        }

        #day_container {
            background-color: white;
            width: 20%; /* 调整表格容器的宽度，可以根据需要修改百分比或像素值 */
            border-radius: 10px; /* 设置容器边角的圆角半径为10px */
            margin-right: 20px; /* 设置右边距为20像素 */
            height: auto; /* 设置高度为自动，根据内容多少自动调整 */
        }

        #context_container{
            width: 45%; /* 设置宽度为60%，根据需要调整 */
            height: 300px; /* 设置固定宽度，根据需要调整 */
            border-radius: 10px; /* 设置边角的圆角半径为10px */
            background-color: white;
            overflow-y: auto; /* 添加滚动条 */
        }

        .row {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            cursor: pointer; /* 让鼠标移动到.row元素上时显示为手型 */
        }

        .circle {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #93CF7D;
            text-align: center;
            line-height: 50px;
            margin-right: 10px;
            margin-left: 10px; /* 向右移动10像素 */
            color: white; /* 设置文字颜色为白色 */
        }

        button {
            width: 20%; /* 让按钮的宽度与父元素（#container）的宽度相同 */
            padding: 10px; /* 添加内边距以增加按钮内部空间 */
            margin-bottom: 10px; /* 与.row之间添加一定的间距 */
            border-radius: 7px; /* 设置容器边角的圆角半径为10px */
        }

        /* 模态框相关样式 */
        .modal {
            display: none; /* 默认隐藏模态框 */
            position: fixed; /* 固定在页面上，不随滚动而移动 */
            z-index: 1; /* 设置z-index以确保模态框在其他元素之上 */
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto; /* 添加滚动条以便于查看完整内容 */
            background-color: rgba(0,0,0,0.4); /* 半透明黑色背景 */
        }

        .modal-content {
            background-color: white;
            margin: 10% auto; /* 让模态框垂直居中 */
            padding: 20px;
            border-radius: 10px; /* 添加圆角边框 */
            box-shadow: 0 0 10px rgba(0,0,0,0.3); /* 添加阴影效果 */
            max-width: 500px; /* 设置最大宽度 */
        }

        .close {
            position: absolute;
            top: 10px;
            right: 20px;
            font-size: 25px;
            font-weight: bold;
            color: #aaa;
            cursor: pointer;
        }

        .modal-content {
            display: flex;
            flex-direction: column;
        }

        .modal-content input,label,select{
            width: 40%;
            padding: 5px;
            margin-bottom: 10px;
            box-sizing: border-box;
        }

        .modal-content textarea {
            width: 100%;
            height: 100px; /* 设置文本框高度 */
            padding: 5px;
            margin-bottom: 10px;
            box-sizing: border-box;
            overflow: auto; /* 当内容超出高度时显示滚动条 */
        }

        .modal-content button {
            width: 10%;
            padding: 10px;
            background-color: #93CF7D;
            color: white;
            border: none;
            cursor: pointer;
        }


    </style>
</head>
<body>


<div id="container">
    <div id="day_container">

    </div>

    <div id="context_container">

    </div>
</div>



<button onclick="showAddDateModal()" style="background-color: #93CF7D; color: white; border: none; margin-top: 10px">+增加一天</button>


<!-- 添加dateTrip 模态框 -->
<div id="dateTrip_modal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="hideDateTripModal()">&times;</span>
        <h2>添加一天行程</h2>
        <form onsubmit="addDateTrip(); hideDateTripModal(); return false;">
            <label for="departureDate">出发日期:</label>
            <input type="date" id="departureDate" name="departureDate" required><br>

            <label for="startLocation">出发地:</label>
            <input type="text" id="startLocation" name="startLocation" required><br>

            <label for="destination">目的地:</label>
            <input type="text" id="destination" name="destination" required><br>

            <button type="submit">保存</button>
        </form>
    </div>
</div>

<!-- 添加trip 模态框 -->
<div id="trip_modal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="hideTripModal()">&times;</span>
        <h2>添加当日游玩</h2>
        <form onsubmit="addTrip(); hideTripModal(); return false;">
            <label for="place">地点:</label>
            <input type="text" id="place" name="place" required>
            <br/>
            <label for="type">类型:</label>
            <select id="type" name="type" required>
                <option value="景点">景点</option>
                <option value="美食">美食</option>
                <option value="购物">购物</option>
                <option value="住宿">住宿</option>
            </select>
            <br/>
            <label for="method">出行方式:</label>
            <select id="method" name="method" required>
                <option value="步行">步行</option>
                <option value="骑行">骑行</option>
                <option value="汽车">汽车</option>
                <option value="公共交通">公共交通</option>
                <option value="高铁">高铁</option>
                <option value="飞机">飞机</option>
            </select>
            <br/>
            <label for="price">花费金额(￥):</label>
            <input type="text" id="price" name="price" required>
            <br/>
            <label for="content">游玩内容:</label>
            <textarea id="content" name="content" required></textarea>
            <br/>
            <button type="submit">保存</button>
        </form>
    </div>
</div>



<script>
    // 当前操作的日行程
    let curDateTrip = 0;

    // 行程对象
    const trip = {
        tripId :0,  // 行程id
        dateTripId: 0,// 日行程id
        place: "",  // 地点
        type: "",   // 类型
        method: "", // 出行方式
        price: 0,   // 金额
        content: "" // 游玩内容
    };

    // 每天的行程
    const dateTrip = {
      dateTripId: 0, // 日行程id
      date : "",     // 日期
      tripList: [],  // 行程列表：多个行程对象
      src : "",      // 出发地
      dest : ""      // 目的地
    };

    // 整个旅游路线对象
    const tripRoute = {
        userId: 1,         // 用户id
        routeId: 1,        // 路线id
        dateTripList: []   // 每日行程list
    };


    // 打开弹窗
    function showAddDateModal() {
        document.getElementById('dateTrip_modal').style.display = 'block';
    }

    // 关闭弹窗
    function hideDateTripModal() {
        document.getElementById('dateTrip_modal').style.display = 'none';
    }

    // 打开弹窗
    function showAddTripModal() {
        document.getElementById('trip_modal').style.display = 'block';
    }

    // 关闭弹窗
    function hideTripModal() {
        document.getElementById('trip_modal').style.display = 'none';
    }

    // 添加DateTrip
    function addDateTrip() {
        const departureDate = document.getElementById('departureDate').value;
        const startLocation = document.getElementById('startLocation').value;
        const destination = document.getElementById('destination').value;

        // 根据需要进行验证，确保输入不为空等

        const dateTripId = tripRoute.dateTripList.length + 1; // 为每个行程生成唯一的id
        const newDateTrip = {
            dateTripId: dateTripId,
            date: departureDate,
            tripList: [],
            src: startLocation,
            dest: destination
        };

        tripRoute.dateTripList.push(newDateTrip);

        // 展示dateTrip
        showDateTrip();
    }

    // 展示dateTrip
    function showDateTrip() {
        const dayContainer = document.getElementById('day_container');
        dayContainer.innerHTML = ''; // 清空原有内容

        tripRoute.dateTripList.forEach(trip => {
            const tripContainer = document.createElement('div');
            tripContainer.className = 'trip-container';
            tripContainer.className = "row";

            const tripElement = document.createElement('div');
            tripElement.className = 'circle';
            tripElement.textContent = `D${trip.dateTripId}`;

            const tripInfoElement = document.createElement('div');
            tripInfoElement.innerHTML = `
            <p>出发日期: <strong>${trip.date}</strong></p>
            <p>${trip.src} -> ${trip.dest}</p>
            `;

            // 为元素绑定click事件，调用showDateTrip方法
            tripContainer.addEventListener('click', () => {
                showDateTripInfo(trip.dateTripId);
            });

            tripContainer.appendChild(tripElement);
            tripContainer.appendChild(tripInfoElement);

            dayContainer.appendChild(tripContainer);
        });
    }

    // 展示dateTrip详情
    function showDateTripInfo(dateTripId) {
        curDateTrip = dateTripId; // 记录当前正在操作的日行程id

        // 根据dateTripId查找对应的dateTrip对象
        const selectedDateTrip = tripRoute.dateTripList.find(trip => trip.dateTripId === dateTripId);

        // 显示在context_container中
        const contextContainer = document.getElementById('context_container');
        contextContainer.innerHTML = `
        <p>出发日期: <strong>${selectedDateTrip.date}</strong></p>
        <p>${selectedDateTrip.src} -> ${selectedDateTrip.dest}</p>

    `;

        // 添加“添加当日游玩”按钮
        const addPlayButton = document.createElement('button');
        addPlayButton.textContent = '+添加当日游玩';
        addPlayButton.style.backgroundColor = '#93CF7D'; // 设置背景颜色
        addPlayButton.style.color = 'white'; // 设置字体颜色

        addPlayButton.addEventListener('click', () => {
            showAddTripModal();
        });
        contextContainer.appendChild(addPlayButton);

        // 遍历展示当前dateTrip的tripList
        selectedDateTrip.tripList.forEach(trip => {
            const tripElement = document.createElement('div');
            tripElement.innerHTML = `
            <p>${trip.place}  ${trip.type}  ${trip.method}  花费金额: ${trip.price}</p>
            <button onclick="showTripDetails(${trip.tripId})">查看详情</button>
        `;
            contextContainer.appendChild(tripElement);
        });
    }

    // 查看行程详情
    function showTripDetails(tripId) {
        // 根据tripId查找对应的行程详情并展示详情，你可以根据具体需求来实现该函数
    }


    // 保存当日游玩信息
    function addTrip() {
        const tripId = 0; // 行程id
        const dateTripId = curDateTrip; // 日行程id
        const place = document.getElementById('place').value;
        const type = document.getElementById('type').value;
        const method = document.getElementById('method').value;
        const price = parseFloat(document.getElementById('price').value); // 转换为数字
        const content = document.getElementById('content').value;

        // 创建行程对象
        const newTrip = {
            tripId: tripId,
            dateTripId: dateTripId,
            place: place,
            type: type,
            method: method,
            price: price,
            content: content
        };

        // 将新行程添加到相应的dateTrip中
        const dateTrip = tripRoute.dateTripList.find(item => item.dateTripId === dateTripId);
        if (dateTrip) {
            newTrip.tripId = dateTrip.tripList.length + 1; // 为每个trip生成唯一的id
            dateTrip.tripList.push(newTrip);
        } else {
            console.error('Date trip not found.');
        }

        // 关闭弹窗
        document.querySelector('.modal').remove();

        // 展示日行程信息
        showDateTrip();

        // 展示当前日行程的详情
        showDateTripInfo(curDateTrip);


        console.log(tripRoute);
    }


</script>


</body>
</html>
